<template>
    <div class="container eesData">
        <div class="header">
            <span class="header-style">日期范围：</span>
            <el-date-picker
                v-model="startTime"
                type="datetime"
                placeholder="开始日期"
                size="small"
            />
            <span class="header-next">-</span>
            <el-date-picker
                v-model="endTime"
                type="datetime"
                placeholder="结束日期"
                size="small"
            />
            <el-button
                type="primary"
                size="small"
                @click="getExportTabData"
                class="header-btn"
                :disabled="!authResult.auth_page"
            >
                导出
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            startTime: '',
            endTime: '',
            authResult: ''
        };
    },
    created () {
        this.authResult = this.$route.meta.authResult;
        this.setHeader();
    },
    methods: {
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: 'EES统计数据'
            }]);
        },

        /**
         * 导出表格数据
         */
        getExportTabData () {
            let startTime = this.startTime !== '' ? this.startTime.getTime() : '';
            let endTime = this.endTime !== '' ? this.endTime.getTime() : '';
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let type = '1'; //1 ees分享统计
            let url = `${base}/student/hand_ees%5Cexport?type=${type}&start_time=${ startTime / 1000 }&end_time=${endTime / 1000}&__ticket=${ticket}`;

            window.open(url);
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 15px;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        .header {
            display: flex;
            align-items: center;
            .header-style {
                color: #606266;
            }
            .header-next {
                color: #606266;
                margin: 0 8px;
            }
            .header-btn {
                margin-left: 50px;
            }
        }
    }
</style>
<style>
</style>
